<template>
  <div>
    <div>
      <ul class="lz">
        <li v-for="(item,index) of list" :key="index">
          <div class="lz_left">
            <img :src="IP+item.thumb" alt />
          </div>
          <div class="lz_right">
            <p class="title1">{{item.title}}</p>
            <p class="place">{{item.keywords}}</p>
            <p class="time">{{item.description}}</p>
            <!-- <span class="content1"> 我们的家乡，舟山，这座美丽可爱的千岛之城，却拥有着一道难以消逝的历史伤痛。
            180年前，面对着用坚船利炮叩门而来的英国侵略者，舟山军民为保卫家园谱写了一曲壮烈的海山悲歌。义无反顾的牺牲连敌人也为之折服，却没有换来最终的胜利。历史给了舟山最深刻的教训，时刻提醒着我们不可再重蹈当年的覆辙。</span>-->
          </div>
        </li>
        <!-- <li>
          <div class="lz_left">
            <img src='../../assets/image/lz1.png' alt />
          </div>
          <div class="lz_right">
            <p class="title1">国风巨匠——齐白石 黄宾虹 徐悲鸿 张大千精品特展</p>
            <p class="place">展览地点：三楼多功能厅</p>
            <p class="time">展出时间：2019年1月122日</p>
            <span class="content1">  绘画是一种情感表达方式。画家在一方宣纸上，以其有形的视觉张力，宣泄无形的内心情感。

        齐白石、黄宾虹、徐悲鸿、张大千都是19-20世纪中国美术变革时期的画坛大师。虽然他们的艺术经历、创作题材各有不同，但在“守”与“变”的长期探索中，都达到了一个崭新的高度。正是这种在弘扬传统中追求革新的精神，推进了国画艺术的世代相承、生生不息。</span>
          </div>
        </li>-->
      </ul>
    </div>
      <div>
          <p>{{jian}}</p>
          <button @click="$store.commit('jian')">jian</button>
        </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.get();
  },
  components: {},
  computed: {
    jian() {
      return this.$store.state.core;
    }
  },
  methods: {
    get() {
      this.$api
        .get(`http://api.museum24h.com/myidea10/api/list/linzhanyugao`)
        .then(res => {
          console.log(res);
          this.list = res.data.page.list;
        });
    }
  }
};
</script>
<style scoped>
ul,
p,
li {
  margin: 0px;
  padding: 0px;
}
.lz li {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  background: rgb(225, 225, 225);
  justify-content: space-between;
  margin-bottom: 30px;
}

.lz_right {
  width: 600px;
  box-sizing: border-box;
  padding-left: 30px;
}
.title1 {
  color: rgb(46, 83, 90);
  font-size: 24px;
  margin-bottom: 10px;
}
.place,
.time {
  font-size: 14px;
  margin-bottom: 10px;
}
.content1 {
  font-size: 12px;
  line-height: 0px;
}
</style>